<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {Exam, Grade, Question, User} from "../../../types/mytypes";
import {PageStore, UserStore} from "../../../store/store";
import {mysqlTimeToMyDate} from "../../../tools/mysqlTool";
import {GradeRequest, QuestionRequest} from "../../../request/MyRequset";
import MyCard from "../../../components/MyCard.vue";
import UserQuestionShow from "../../../components/Question/UserQuestionShow.vue";
let exam = ref<Exam>(PageStore.getNowExam());
const user:User = UserStore.getUser();
let grade  = ref<Grade>({} as Grade)
let questionList = ref<Question[]>([])

onMounted(async ()=>{
    //console.log(this.exam)
    exam.value.create_time = mysqlTimeToMyDate(exam.value.create_time)
    exam.value.start_time = mysqlTimeToMyDate(exam.value.start_time)
    exam.value.end_time = mysqlTimeToMyDate(exam.value.end_time)
    grade.value = (await GradeRequest.getUserOne(user.id,exam.value.id)).data;
    questionList.value = (await QuestionRequest.getByExamId(exam.value.id)).data;
})

</script>

<template>
    <MyCard style="height: 100%" :title="exam.name" back>
        <div class="container">
            <div class="info_content">
                <el-form>
                    <el-form-item label="考试名称">
                        <el-text type="primary">{{ exam.name }}</el-text>
                    </el-form-item>
                    <el-form-item label="发布时间">
                        <el-text type="primary">{{ exam.create_time }}</el-text>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-text type="primary">{{ exam.start_time }}</el-text>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-text type="primary">{{ exam.end_time }}</el-text>
                    </el-form-item>
                    <el-form-item label="是否及格">
                        <el-text type="primary">{{ grade.teacherShow?((grade.pass)?"是":"否"):"老师还未阅卷"}}</el-text>
                    </el-form-item>
                    <el-form-item label="是否提交">
                        <el-text type="primary">{{grade.userCommit?"是":"否" }}</el-text>
                    </el-form-item>
                    <el-form-item label="正确题数">
                        <el-text type="primary">{{ grade.right_count }}</el-text>
                    </el-form-item>
                </el-form>
            </div>
            <div class="questionContent">
                <UserQuestionShow v-for="(item,index) in questionList" :question="item" :user="user" :exam="exam"></UserQuestionShow>
            </div>
            <div class="right_none"></div>
        </div>
    </MyCard>
</template>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    background-color: white;
    box-sizing: border-box;
    //border-radius: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .questionContent{
        width: 50%;
        /*border-left: 1px #ccc solid;
        border-right: 1px #ccc solid;*/
        height: 100%;
    }
    .info_content {
        //background-color: red;
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        //align-items: center;

        .content {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
        }

        .content_keys {
            align-items: end;
            padding: 0 10px 0 0;
        }

        .content_values {
            padding: 0 0 0 10px;
        }
    }
    .right_none{
        width: 15%;
    }
}
</style>